<template>
  <div class="AppointmentRecord">
    <c-title text="预约记录"></c-title>
    <div class="topSearch">
      <div class="cell">
        <input type="text" v-model="project_name" placeholder="项目名称" />
      </div>
      <div class="cell">
        <input type="text" v-model="store_name" placeholder="商户名称" />
      </div>
      <div class="cellS" @click="showPicker = true">
        <span style="color:#000;">{{ statusTxt }}</span>
        <van-icon name="arrow-down" />
      </div>
      <div class="btn" @click="search">搜索</div>
    </div>
    <div class="list">
      <div class="lis" v-for="item in info" :key="item.id">
        <div class="lis_t">
          <div class="time">{{ item.created_at }}</div>
          <div class="txt">{{ item.status_name }}</div>
        </div>
        <div class="lis_c">
          <div class="imgae">
            <img :src="item.has_one_project.thumb" alt="" v-if="item.has_one_project" />
          </div>
          <div class="contenBox">
            <div class="title" v-if="item.has_one_project">{{ item.has_one_project.title }}</div>
            <div class="contenBox_b">
              <div class="store" v-if="item.has_one_store">预约门店：{{ item.has_one_store.store_name }}</div>
              <div class="time">预约时间：{{ daySet(item.day) }} {{ item.has_one_expect_set.start_hour }}-{{ item.has_one_expect_set.end_hour }}</div>
            </div>
          </div>
        </div>
        <div class="lis_btn" v-if="item.status == 0" @click="cancelAppointment(item.id)">
          <div class="btn">取消预约</div>
        </div>
      </div>
      <van-empty image="search" v-if="info.length <= 0" description="暂无记录" />
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker show-toolbar :columns="options" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      project_name: "",
      store_name: "",
      options: ["已预约", "已完成","已取消", ],
      showPicker: false,
      statusVal: 0,
      statusTxt: "已预约",
      info: [],

      page: 1, //分页数，当前页数
      isLoadMore: true, //判断是否要加载更多的标志
      total_page: 0 //总页数
    };
  },
  computed: {
    daySet(day) {
      return function(day) {
        let str = String(day);
        return `${str.slice(0, 4)}/${str.slice(4, 6)}/${str.slice(6, 8)}`;
      };
    }
  },
  methods: {
    search() {
      this.init();
      this.getData();
    },
    init() {
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
    },
    async getData() {
      let json = {
        status: this.statusVal == 2 ? "-1" : this.statusVal,
        store_name: this.store_name,
        project_name: this.project_name
      };
      let { msg, data, result } = await $http.post("plugin.store-projects.frontend.expect.expectLog", json, ".");
      if (!result) {
        this.$toast(msg);
        return;
      }
      this.info = data.data;
      this.isLoadMore = true;
      this.total_page = data.last_page;
      if (!this.total_page) {
        this.total_page = 0;
      }
    },
    //加载更多数据
    async getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          status: this.statusVal == 2 ? "-1" : this.statusVal,
          store_name: this.store_name,
          project_name: this.project_name,
          page: this.page
        };
        let { msg, data, result } = await $http.post("plugin.store-projects.frontend.expect.expectLog", json, ".");
        this.isLoadMore = true;
        if (!result) {
          this.$toast(msg);
          this.page = this.page - 1;
          this.isLoadMore = false;
          return;
        }
        let nextPageData = data.data;
        this.info = this.info.concat(nextPageData);
      }
    },
    async cancelAppointment(id) {
      this.$dialog
        .confirm({ message: "您确定要取消此预约吗?" })
        .then(() => {
          this.cancelPost(id);
        })
        .catch(() => {});
    },
    async cancelPost(id) {
      let json = {
        id: id
      };
      let { msg, data, result } = await $http.post("plugin.store-projects.frontend.expect.cancelExpect", json, ".");
      if (!result) {
        this.$toast(msg);
        return;
      }
      this.$toast(msg);
      this.getData();
    },
    onConfirm(value, ind) {
      this.statusVal = ind;
      this.statusTxt = value;
      this.showPicker = false;
      this.getData();
    },
    onCancel() {
      this.showPicker = false;
    }
  },
  activated() {
    this.init();
    this.statusVal = 0;
    this.statusTxt = "已预约";
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
.list {
  padding: 0.63rem 0.75rem;
  overflow: hidden;
  box-sizing: border-box;
  .lis {
    padding: 0.91rem 0.75rem;
    background: #ffffff;
    border-radius: 0.5rem;
    .lis_t {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.94rem;
      .time {
        font-size: 0.81rem;
        color: #9898a1;
      }
      .txt {
        font-size: 0.88rem;
        color: #f15353;
      }
    }
    .lis_btn {
      margin-top: 0.63rem;
      display: flex;
      justify-content: flex-end;
      .btn {
        width: 4.81rem;
        height: 2rem;
        border-radius: 0.38rem;
        border: 0.03rem solid #aaaab3;
        text-align: center;
        line-height: 2rem;
        font-size: 0.81rem;
      }
    }
    .lis_c {
      display: flex;
      justify-content: space-between;
      .imgae {
        flex-shrink: 0;
        width: 5rem;
        height: 5rem;
        background: #d6d6dc;
        border-radius: 0.63rem;
        margin-right: 0.53rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.63rem;
        }
      }
      .contenBox {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        overflow: hidden;
        .title {
          width: 100%;
          overflow: hidden;
          flex: 1;
          font-weight: 500;
          font-size: 0.88rem;
          text-align: left;

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .contenBox_b {
          flex-shrink: 0;
          text-align: left;
          font-size: 0.81rem;
          width: 100%;
          overflow: hidden;
          .store {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .time {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
.topSearch {
  padding: 0.72rem 0.75rem;
  background: #fff;
  display: flex;
  .btn {
    font-size: 0.81rem;
    color: #ffffff;
    padding: 0.59rem 0.97rem;
    border-radius: 0.38rem;
    background: #ce811d;
    margin-left: 0.47rem;
  }
  .cellS {
    width: 5.63rem;
    padding: 0 0.75rem;
    border-radius: 0.38rem;
    border: 0.03rem solid #d6d6dc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #d6d6dc;
  }
  .cell {
    width: 5.63rem;
    border-radius: 0.38rem;
    border: 0.03rem solid #d6d6dc;
    padding: 0.59rem 0.75rem;
    margin-right: 0.5rem;
    input {
      border: none;
    }
    input::placeholder {
      color: #d6d6dc;
    }
  }
}
</style>
